<template>
  <PanelLayout>
    <div class="one-cell">
      <div
        class="item"
        v-for="(item, index) in countList"
        :key="index"
        @click="onClick(index)"
      >
        <h4 class="count"><CountUpVue :end-val="item.value" /></h4>
        <span class="label">
          <i
            class="icon-dot"
            :style="{ 'background-color': colors[index] }"
          ></i>
          {{ item.label }}
        </span>
      </div>
    </div>
  </PanelLayout>
</template>

<script setup name="OneCell">
import PanelLayout from '@/views/index/PanelLayout.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'
import { randomLenNum } from '@/utils/index.js'
import { getNumZy, getFcData } from '@/api/base.js'
import { Btn1, Btn2, Btn3 } from '@/store/modules/indexBtnDefault.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()

const emit = defineEmits(['changeBtn'])

const colors = ['#4c9bfd', '#6acca3', '#ed3f35']

const countList = ref([])

const init = () => {
  const time = appStore.timePoint
  // 模拟接口获取数据
  // console.log('模拟接口获取数据', appStore.timePoint)
  getNumZy({ time: time }).then(res => {
    if (res.code == '0000') {
      countList.value = res.data
    }
  })
  // countList.value = [
  //   {
  //     label: '风电场数量',
  //     value: randomLenNum(3)
  //   },
  //   {
  //     label: '风机数量',
  //     value: randomLenNum(3)
  //   },
  //   {
  //     label: '换流站数量',
  //     value: randomLenNum(3)
  //   }
  // ]
  // console.log(list.value);
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)

const onClick = index => {
  const btnMap = {
    0: Btn1,
    1: Btn2,
    2: Btn3
  }
  emit('changeBtn', btnMap[index])
}
</script>

<style lang="scss" scoped>
.one-cell {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
  }
  .count {
    font-size: 24px;
  }
  .label {
    font-size: 14px;
    color: #4c9bfd;
    .icon-dot {
      width: 6px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      background-color: #4c9bfd;
    }
  }
}
</style>
